<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腾飞健康-用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/oksub.css">
</head>
<body>
<div class="ok-body">
    <!--模糊搜索区域-->
    <!--<div class="layui-row">
        <form class="layui-form layui-col-md12 ok-search">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
            <input class="layui-input" placeholder="编号" autocomplete="off" name="username">
            <button class="layui-btn" lay-submit="" lay-filter="search">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>-->
    <!--数据表格-->
    <table class="layui-hide" id="unitListId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script>
    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let okMock = layui.okMock;
        let $ = layui.jquery;

        laydate.render({elem: "#startTime", type: "datetime"});
        laydate.render({elem: "#endTime", type: "datetime"});

        let userTable = table.render({
            elem: '#unitListId',
            url: "/getUnitList",
            limit: 5,
            limits: [5, 10, 15],
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            method: "post",
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize"
            },
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg"
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left"},
                    {field: "unitId", title: "ID", width: 80, align: "center", sort: true, id: "unitId"},
                    {field: "unitName", title: "名称", width: 150, align: "center"},
                    {field: "type", title: "类型", width: 90, align: "center"},
                    {field: "grade", title: "等级", width: 90, align: "center"},
                    {field: "principal", title: "负责人", width: 90, align: "center"},
                    {field: "telephone", title: "电话", width: 110, align: "center"},
                    {field: "email", title: "邮箱", width: 160, align: "center"},
                    {field: "address", title: "地址", width: 100, align: "center"},
                    {field: "description", title: "单位介绍", width: 100, align: "center"},
                    {field: "registeTime", title: "注册时间", width: 120, align: "center", sort: true},
                    {field: "updateTime", title: "更新时间", width: 120, align: "center", sort: true},
                    {field: "disabled", title: "状态", width: 100, align: "center", templet: "#statusTpl"},
                    {title: "操作", width: 100 , align: "center", fixed: "right", templet: "#operationTple"}
                ]
            ],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        form.on("submit(search)", function (data) {
            userTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchEnabled();
                    break;
                case "batchDisabled":
                    batchDisabled();
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "unitRegiste":
                    unitRegiste();
                    break;
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.unitId);
                    break;
            }
        });

        /*启用|停用开关的实现方法
        * 参数；disabled: 点击开关后的状态值；msg：用以在弹出框提醒用户*/
        form.on("switch(disabledSwitch)", function (data) {
            let disabled = data.elem.checked;
            let msg;
            if (disabled) {
                msg = "启用";
            } else {
                msg = "停用";
            }

            layer.open({
                content: "确定要<span style='color:red'>" + msg + "</span>该单位吗？",
                btn: ['确定', '取消'],
                yes: function (index) {
                    let unitId = data.value;
                    console.log("unitId:" + unitId);
                    okUtils.ajax("/updateUnitDisabled", "get", "disabled=" + disabled + "&unitId=" + unitId, true)
                        .done(function (response) {
                            okLayer.greenTickMsg(response.msg);
                        })
                        .fail(function (error) {
                            console(error);
                        });
                    layer.close(index);
                },
                btn2: function (index) {
                    data.elem.checked = !disabled;
                    form.render();
                    layer.close(index);
                },
                cancel: function () {
                    data.elem.checked = !disabled;
                    form.render();
                }
            });

        });


        function batchEnabled() {
            okLayer.confirm("确定要批量启用吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("unitListId");
                console.log(checkStatus.data.length);
                let unitIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        unitIds = unitIds + checkStatus.data[i].unitId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }

                if (unitIds) {
                    okUtils.ajax("/batchEnabledUnits", "post", {unitIds: unitIds}, true)
                        .done(function (responseData) {
                            console.log(responseData);
                            okUtils.tableSuccessMsg(responseData.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function batchDisabled() {
            okLayer.confirm("确定要批量停用吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("unitListId");
                console.log(checkStatus.data.length);
                let unitIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        unitIds = unitIds + checkStatus.data[i].unitId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }

                if (unitIds) {
                    okUtils.ajax("/batchDisabledUnits", "post", {unitIds: unitIds}, true)
                        .done(function (responseData) {
                            console.log(responseData);
                            okUtils.tableSuccessMsg(responseData.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("unitListId");
                let unitIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        unitIds = unitIds + checkStatus.data[i].unitId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }

                if (unitIds) {
                    okUtils.ajax("/batchDeleteUnits", "post", {unitIds: unitIds}, true)
                        .done(function (responseData) {
                            console.log(responseData);
                            okUtils.tableSuccessMsg(responseData.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function unitRegiste() {
            okLayer.open("注册单位", "/unitRegiste", "90%", "90%", null, function () {
                userTable.reload();
            })
        }

        function edit(data) {
            /*$.ajax({
                url: "/getEditUnitPage",
                type: "get",
                async: true,
                beforeSend: function () {
                    loadIndex = layer.load(0, {shade: 0.3});
                },
                success: function (responseData) {
                    okLayer.open("编辑用户", responseData, "90%", "90%",
                        function (layero) {
                            /!*let iframeWin = window[layero.find("iframe")[0]["name"]];
                            iframeWin.initForm(data);*!/
                        }, function () {
                            userTable.reload();
                        })
                },
                error: function () {
                    console.log("editUnitPage error");
                    layer.close(loadIndex);

                },
                complete: function () {
                    layer.close(loadIndex);
                }
            });*/
        }

        function del(unitId) {
            okLayer.confirm("确定要删除单位" + unitId + "吗？", function () {
                okUtils.ajax("/deleteUnitById", "get", {unitId: unitId}, true)
                    .done(function (response) {
                        console.log(response);
                        okUtils.tableSuccessMsg(response.msg);
                    }).fail(function (error) {
                    console.log(error)
                });
            })
        }
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量启用</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量停用</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="unitRegiste">注册单位</button>
    </div>
</script>

<!-- 启用|停用模板 -->
<script type="text/html" id="statusTpl">
    <input type="checkbox" lay-skin="switch" name="disabled" lay-text="启用|停用" lay-size="sm" lay-event="disabledSwitch"
           lay-filter="disabledSwitch" {{ d.disabled==true?'checked':''}} value={{ d.unitId}}>
</script>

<!-- 编辑|删除模板 -->
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteClause"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>

</body>
</html>


